<template>
  <div>
    <h3>差异报告上传</h3>
    <el-card>
      <div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line f-size-16">报告基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">报告机构名称</p>
              <el-input v-model="baseInfo.orgName" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">报告时间</p>
              <el-input v-model="baseInfo.startTime" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">报告机构编码</p>
              <el-input v-model="baseInfo.orgCode" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">关联核验记录流水号</p>
              <el-input v-model="baseInfo.serial1" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">关联查询流水号</p>
              <el-input v-model="baseInfo.serial2" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">机构联系电话</p>
              <el-input v-model="baseInfo.phone" size="small" placeholder="请输入机构联系电话"></el-input>
            </div>
          </div>
          <div style="font-size: 14px">
            <p class="title">报告简述</p>
            <el-input type="textarea" v-model="baseInfo.content" placeholder="请输入简述内容" rows="3"></el-input>
          </div>
        </div>
        <div class="border-bottom mar-top-12">
          <div class="title border-line f-size-16">备案主体基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">统一社会信用代码</p>
              <el-input v-model="baseInfo.companyCode" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">备案主体名称</p>
              <el-input v-model="baseInfo.bodyName" size="small" placeholder="" disabled></el-input>
            </div>
            <div class="item">
              <p class="title">备案主体类型</p>
              <el-input v-model="baseInfo.bodyType" size="small" placeholder="请输入备案主体类型" disabled></el-input>
            </div>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16 flex-bt">
            <div>受益所有人及所有权信息</div>
            <el-button type="primary" size="small" icon="el-icon-plus" @click="add">添加受益所有人</el-button>
          </div>
          <div class="mar-top-12">
            <div></div>
            <el-card style="height: 100px">
              <div slot="header"></div>
              <div></div>
            </el-card>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">上传证明材料</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">分析报告</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">上传案例分析报告</div>
          <div class="mar-top-12">
            <el-upload class="upload-demo" drag action="#" multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">仅支持PDF,PNG,JPG,OFD格式，文件个数限制：1个，单个文件不超过1M</div>
            </el-upload>
          </div>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <!-- <el-button size="small" type="primary" @click="exportInfo">流程查看</el-button> -->
      <el-button size="small" type="primary" @click="exportInfo">上传差异报告</el-button>
      <el-button size="small" @click="goBack">关 闭 </el-button>
    </div>
    <el-dialog title="" :visible.sync="dialogVisible" width="50%" :before-close="dialogBeforeClose">
      <div>
        <el-form label-width="180px" label-position="top">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="form.name" placeholder="测试" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生日期">
                <el-date-picker v-model="form.birthDate" type="date" placeholder="2025-03-03" disabled style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="身份证件或身份证号文件有效期限">
                <el-select v-model="form.idExpiry" placeholder="请选择证件有效期" style="width: 100%">
                  <el-option label="10年" value="10"></el-option>
                  <el-option label="20年" value="20"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核实原住建局工作单位地址">
                <el-input v-model="form.workAddress" placeholder="33333323"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <div class="section-title">受益所有权信息</div>

          <el-form-item label="受益所有权关系变更(可多选)">
            <el-checkbox-group v-model="form.ownershipChanges">
              <el-checkbox label="普通或间接所有公司、合伙企业25%以上股权、股份"></el-checkbox>
              <el-checkbox label="可提供抵押贷款5%以上收益权、乘积权"></el-checkbox>
              <el-checkbox label="未按法律规定生效 协议约定形式 其他形式"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="免责日用经营管理人（员）">
            <el-checkbox-group v-model="form.managementPersonnel">
              <el-checkbox label="法定代表人"></el-checkbox>
              <el-checkbox label="董事长"></el-checkbox>
              <el-checkbox label="经理"></el-checkbox>
              <el-checkbox label="董事"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="国籍">
                <el-select v-model="form.nationality" placeholder="阿富汗" style="width: 100%">
                  <el-option label="中国" value="china"></el-option>
                  <el-option label="阿富汗" value="afghanistan"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证件或身份证号文件类型">
                <el-select v-model="form.idType" placeholder="其他有关身份证件" style="width: 100%">
                  <el-option label="身份证" value="id"></el-option>
                  <el-option label="护照" value="passport"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号码">
                <el-input v-model="form.phone" placeholder="15971662689"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="性别">
                <el-radio-group v-model="form.gender">
                  <el-radio label="男性"></el-radio>
                  <el-radio label="女性"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证件或身份证号文件号码">
                <el-input v-model="form.idNumber" placeholder="123321"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="固定电话">
                <el-input v-model="form.telephone" placeholder="请输入固定电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DiffInfoUpload',

  data() {
    return {
      baseInfo: {
        caseCode: 'CA202508080001',
        diffCode: 'QB202508080001',
        companyCode: '914301003388567',
        bodyName: '世瑞科技股份有限公司',
        orgCode: '914301003388567',
        orgName: '华南科技股份有限公司',
        status: '审批通过',
        startTime: '2025-08-18 15:35:35',
        handOrg: '华南科技股份有限公司',
        endTime: '2025-08-18 15:35:35',
        phone: '',
        serial1: 'CHECK2024120600000008',
        serial2: 'QUERY2024120600000097',
        content: '',
        bodyType: '',
      },
      dialogVisible: false,
      form: {
        name: '测试',
        birthDate: '2025-03-03',
        idExpiry: '',
        workAddress: '33333323',
        ownershipChanges: [],
        managementPersonnel: [],
        nationality: 'afghanistan',
        idType: '',
        phone: '15971662689',
        gender: '男性',
        idNumber: '123321',
        telephone: '',
      },
    }
  },

  mounted() {},

  methods: {
    goBack() {
      this.$router.go(-1)
    },
    add() {
      this.dialogVisible = true
    },
    dialogBeforeClose() {
      this.dialogVisible = false
    },
    exportInfo() {},
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  padding-bottom: 12px;
  .item {
    width: 30%;
    margin-right: 10px;
    p {
      margin-bottom: 6px;
    }
  }
}
</style>